<!-- piccut -->
<template>
  <div id="piccut">
    <div class="cut">
      <vue-picture-cut
        ref="pictureCut"
        :src="src"
        :background-color="backgroundColor"
        :init-angle="initAngle"
        :msk-option="mskOption"
        :menu-thickness="0"
      ></vue-picture-cut>
    </div>
    <div class="cut-menu">
      <vue-picture-cut-menu
        :root="pictureCut"
        :max-pixel="maxPixel"
        :encoder-options="encoderOptions"
        :format="format"
        theme="default"
        size-auto-name="自由"
        size-raw-name="原始"
        menu-rotate-name="旋转"
        cancel-name="取消"
        confirm-name="确认"
        @on-change="cutChange"
      ></vue-picture-cut-menu>
    </div>
    <el-form
      style="margin-top: 15px"
      ref="form"
      :model="mskOption"
      label-width="140px"
      inline
    >
      <el-form-item :label="'裁剪框:'">
        <el-radio-group v-model="mskOption.isRound">
          <el-radio :label="false" style="margin-right: 20px">矩形</el-radio>
          <el-radio :label="true">椭圆</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <!--choose picture-->
    <input type="file" accept="image/*" @change="fileChange" />
    <!--choose picture-->
    <a
      class="download-img"
      download="finename.jpeg"
      :href="base64"
      :style="{ 'background-image': `url(${newSrc})` }"
    >
      download
    </a>
  </div>
</template>

<script>
import { VuePictureCut, VuePictureCutMenu } from "vue-picture-cut";
import axios from "axios";
import { BASE_URL } from '../config'
export default {
  components: {
    VuePictureCut,
    VuePictureCutMenu,
  },
  data() {
    return {
      src: "./demo.jpg",
      blob: null,
      base64: "",

      mskOption: {
        width: 4,
        height: 5,
        isRound: false,
        resize: true,
        color: "rgba(0,0,0,0)",
        borderColor: "#E600FF",
      },
      backgroundColor: "rgba(14, 9, 9, 0.09)",
      rotateControl: true,
      initAngle: 0,

      pictureCut: null,
      maxPixel: 500,
      encoderOptions: 0.8,
      format: "image/jpeg",
    };
  },
  computed: {
    newSrc() {
      return this.blob ? URL.createObjectURL(this.blob) : "";
    },
  },
  mounted() {
    //this.src = this.$route.query.src;
    if (this.$route.query.id) {
      let id = this.$route.query.id;
      //this.getUrlByid(id);
      this.getUrlByid(id);
    }

    this.pictureCut = this.$refs["pictureCut"];
    console.log(this.pictureCut);
  },
  methods: {
    fileChange(e) {
      if (e.target.files.length) {
        this.src = URL.createObjectURL(e.target.files[0]);
      }
    },
    cutChange(res) {
      this.blob = res.blob;
      this.base64 = res.base64;
    },
    async getUrlByid(id) {
      axios
        .get(BASE_URL+"/imgcenter/downloadByIds?imageIds=" + id, { responseType: "blob" })
        .then((res) => {
          let blob = new Blob([res.data]);
          console.log(blob);
          let objectUrl = window.URL.createObjectURL(blob);
          this.src = objectUrl;
        });
      // let res = await this.$get("/imgcenter/getUrlById", {
      //   imageId: id,
      // });
    },
  },
};
</script>

<style   scoped>
@import "~vue-picture-cut/lib/vue-picture-cut.css";
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
#piccut {
  width: 80%;
  height: 80%;

  max-width: 1000px;
  padding: 10px;
  margin: 0 auto;
}
.cut {
  outline: 1px solid #000;
  height: 460px;
  margin-bottom: 20px;
  overflow: hidden;
}
.cut-menu {
  outline: 1px solid #000;
  width: 100%;
  margin-bottom: 20px;
}
.download-img {
  display: inline-block;
  width: 150px;
  height: 150px;
  outline: 1px solid #000;
  text-align: center;
  line-height: 150px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
</style>
